<template>
  <div class="pho-form-item">
    <van-field
      class="form-input-hidden"
      v-bind="$attrs"
      :value="value"
      :label="showLabel ? $attrs.label : ''"
      :name="$attrs.__vModel__"
      readonly
    />
    <div class="pho-form-item-cont" @click="handleOpen">
      <div class="form-components">
        <div v-if="readonly" class="form-readonly"></div>
        <div v-if="disabled" class="form-disabled"></div>
        <van-image :src="value" v-if="value" />
        <div class="form-signature-empty pho-form-signature-empty" v-else>{{$attrs.placeholder}}</div>
      </div>
    </div>
    <EsignDialog ref="EsignDialog" v-bind="$attrs" @update="callBack" />
  </div>
</template>

<script>
import EsignDialog from "./components/esignDialog.vue";
export default {
  name: "phone-form-signature",
  components: {
    EsignDialog
  },
  props: {
    value: {
      type: String,
      default: ""
    },
    // 是否展示标题
    showLabel: {
      type: Boolean,
      default: true
    },

    readonly: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    width: {
      type: Number,
      default: 800
    }
    // height: {
    //   type: Number,
    //   default: 300
    // }
  },
  data() {
    return {
      dialogVisible: false // 弹框是否开启
    };
  },
  methods: {
    handleOpen() {
      if (this.readonly || this.disabled) return;
      this.$refs.EsignDialog.open();
    },
    callBack(value) {
      this.$emit("input", value);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../styles/generator.scss";

.pho-form-item-cont {
  .van-image {
    &:hover {
      // border: 1px dashed $themeColor;
      border-radius: 6px;
    }
  }
}
.pho-form-signature-empty {
  background-color: #f7f8fa;
  color: #c8cacb;
  border-width: 0;
  &:hover {
    border-width: 0;
  }
}
</style>